import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入登入组件
import Login from '../../src/views/login/Login.vue'
// 导入
import home from '@/views/home/home.vue'
import company from '@/views/home/company/company.vue'
import find from '@/views/home/find/find.vue'
import my from '@/views/home/my/my.vue'
import question from '@/views/home/question/question.vue'
import myInfo from '../views/home/my/myInfo.vue'
import editInfo from '../views/home/my/editInfo.vue'
import shareList from '../views/home/find/shareList.vue'
import shareInfo from '../views/home/find/shareInfo.vue'
import questionInfo from '../views/home/question/questionInfo.vue'

// 导入store
import store from '../store/index'
// 导入token操作文件
import { getToken } from '../utils/token'
// 导入获取用户信息方法
// import { auInfo } from '../api/my'
import { auInfo } from '../api/my'

Vue.use(VueRouter)
// 下面这段代码是跳转相同路由路径报错解决方案 但是我们谁会自己跳转自己页面啊 因此用不上
// (退出登入 然后点击左上角箭头 跳转到发现页面 然后点击下面的标签栏切换 会报错 加上下面代码就不会报错)
// 获取原型对象上的push函数
const originalPush = VueRouter.prototype.push
// 修改原型对象中的push方法
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}
const routes = [
  { path: '/login', component: Login },
  // 重定向
  { path: '/', redirect: '/login' },
  {
    path: '/home',
    component: home,
    redirect: '/home/my',
    children: [
      {
        path: '/home/company',
        component: company,
        meta: {
          needTab: true
        }
      },
      {
        path: '/home/find',
        component: find,
        meta: {
          needTab: true
        }
      },
      {
        path: '/home/my',
        component: my,
        meta: {
          needLogin: true,
          needTab: true
        }
      },
      {
        path: '/home/question',
        component: question,
        meta: { needLogin: true, needTab: true }
      },
      {
        path: '/home/questionInfo',
        component: questionInfo,
        meta: { needLogin: true }
      },
      { path: '/home/myInfo', component: myInfo, meta: { needLogin: true } },
      {
        path: '/home/editInfo',
        component: editInfo,
        meta: { needLogin: true }
      },
      { path: '/home/shareList', component: shareList },
      { path: '/home/shareInfo/:id', component: shareInfo }
    ]
  }
]
const router = new VueRouter({
  routes
})
// 导航守卫 前置守卫
router.beforeEach((to, from, next) => {
  const _scrollTop =
    document.documentElement.scrollTop ||
    window.pageYOffset ||
    document.body.scrollTop
  from.meta.xxx = _scrollTop
  window.console.log('0000000000000000000000000')
  // console.log(from.meta)

  // window.console.log(_scrollTop)
  // console.log(to)
  // 不需要登入的页面 直接next()
  if (!to.meta.needLogin) {
    next()
    // 判断isLogin 为false 并且有token  这种  也获取用户信息 不然的话一刷新 就没数据啦  vuex
    if (!store.state.isLogin && getToken('token')) {
      // 获取用户信息
      auInfo(true).then(res => {
        // window.console.log('导航守卫获取用户信息:', res)
        // 存储用户信息
        store.commit('setUserInfo', res.data.data)
        // 更改用户登入状态
        store.commit('setLoginState', true)
      })
    }
  } else {
    // 需要登入
    // 那个有登录  没登录  改成 vueX 有信息  没信息
    // 比如我们之前登入过 然后关闭啦 比如微信 我们登入了(没退出)
    // 我们每次打开 不会每次先登入把  类似登入过保存了token
    // 1 已经登入
    if (store.state.isLogin) {
      next()
    } else {
      // 2 没有登入(分两种情况 1.没token 2.有token)
      if (!getToken('token')) {
        // 路由传参
        // 传:this.$router.push('path?参数名=值')
        // 收:this.$route.query.参数名
        // next('/login')
        next(`/login?redirect=${to.fullPath}`)
      } else {
        auInfo().then(res => {
          window.console.log('导航守卫获取用户信息:', res)
          // 存储用户信息
          store.commit('setUserInfo', res.data.data)
          // 更改用户登入状态
          store.commit('setLoginState', true)
          next()
          // console.log('--------------------')
        })
        // next() 这里不要多加了next()
        // console.log('2222222222222222')
      }
    }
  }
})
// 后置守卫
router.afterEach((to, from) => {
  window.scrollTo(0, 0)
})
export default router
